<template>
 <div class="form-single-fragment" style="position: relative;">
    <el-form  ref="formCreateOrgPaper" :model="formData" class="full-width-input" :rules="rules" style="width: 100%;"
              label-width="100px" :size="defaultFormItemSize" label-position="right" @submit.native.prevent>
      <el-row :gutter="20">
        <el-col :span="12">
          <el-form-item label="学生姓名" prop="OrgPaper.studentName">
            <el-input class="input-item" v-model="formData.OrgPaper.studentName"
                      :clearable="true" placeholder="学生姓名">
            </el-input>
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="创建时间" prop="OrgPaper.commitTime">
            <el-date-picker class="input-item" v-model="formData.OrgPaper.commitTime" :clearable="true"
                            format="yyyy-MM-dd"
                            value-format="yyyy-MM-dd"
                            type="date" align="left"
                            placeholder="创建时间"
            />
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="校区" prop="OrgPaper.schoolId">
            <el-cascader class="input-item" v-model="formCreateOrgPaper.schoolId.value"
                         :options="formCreateOrgPaper.schoolId.impl.dropdownList"
                         filterable
                         :clearable="true"
                         :show-all-levels="false"
                         placeholder="校区"
                         :props="{value: 'id', label: 'name', checkStrictly: true}"
                         @visible-change="formCreateOrgPaper.schoolId.impl.onVisibleChange"
                         @change="onSchoolIdValueChange"
            />
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="相关文件" prop="formCreateOrgPaper.document">
            <el-upload name="uploadFile" :headers="getUploadHeaders" multiple
              :action="getUploadActionUrl('/admin/app/orgPaper/upload')"
              :data="{fieldName: 'document', asImage: false}"
              :on-success="onDocumentUploadSuccess"
              :on-remove="onDocumentRemoveFile"
              :on-error="onUploadError" :on-exceed="onUploadLimit"
              :limit="formCreateOrgPaper.document.impl.maxCount"
              :file-list="formCreateOrgPaper.document.impl.fileList"
              :show-file-list="true">
              <el-button :size="defaultFormItemSize" type="primary">点击上传</el-button>
            </el-upload>
          </el-form-item>
        </el-col>
        <el-col :span="24">
          <el-row class="no-scroll flex-box" type="flex" justify="end">
            <el-button type="primary" :size="defaultFormItemSize" :plain="true"
                       @click="onCancel(false)">
              取消
            </el-button>
            <el-button type="primary" :size="defaultFormItemSize"
                       @click="onAddClick()">
              保存
            </el-button>
          </el-row>
        </el-col>
      </el-row>

    </el-form>
 </div>
</template>

<script>
  /* eslint-disable-next-line */
  import { findTreeNode, findTreeNodePath, findItemFromList } from '@/utils';
  /* eslint-disable-next-line */
  import rules from '@/utils/validate.js';
  /* eslint-disable-next-line */
  import { DropdownWidget, TableWidget, UploadWidget, ChartWidget } from '@/utils/widget.js';
  /* eslint-disable-next-line */
  import { uploadMixin, statsDateRangeMixin } from '@/core/mixins';
  /* eslint-disable-next-line */
  import { OrgPaperController, DictionaryController } from '@/api';

  export default {
    name: "formCreateOrgPaper",
    props: {},
    mixins: [uploadMixin, statsDateRangeMixin],
    data () {
          return {
            formData: {
              OrgPaper: {
                transId: undefined,
                studentName: undefined,
                commitTime: undefined,
                schoolId: undefined,
                studentId: undefined,
                paperId: undefined,
                exerciseId: undefined,
                deviceType: undefined,
                correctFlag: undefined,
                usedSeconds: undefined,
                document: undefined,
                isDatasourceInit: false
              }
            },
              rules: {
                'OrgPaper.studentName': [
                  {require: true,message: '请输入学生姓名', trigger: 'blur'}
                ],
                'OrgPaper.schoolId':[
                  {require: true,message: '请输入所属校区', trigger: 'blur'}
                ],
              },
              formCreateOrgPaper: {
                isInit: false,
                formFilter: {
                },
                formFilterCopy: {
                },
                schoolId: {
                  impl: new DropdownWidget(this.loadSchoolIdDropdownList, true, 'id', 'parentId'),
                  value: []
                },
                menuBlock: {
                  isInit: false
                },
                document: {
                  impl: new UploadWidget(99)
                }
              }
          }
        },
    methods: {
        onCancel (isSuccess, data) {
          if (this.observer != null) {
            this.observer.cancel(isSuccess, data)
          }
        },
        /**
         * 所属校区下拉数据获取函数
         */
        loadSchoolIdDropdownList () {
          return new Promise(((resolve, reject) => {
            let params = {};
            DictionaryController.dictSysDept(this,params).then(res => {
              resolve(res.getList());
            }).catch(e => {
              reject(e);
            })
          }))
        },
        /**
         * 所属校区选中值改变
         */
        onSchoolIdValueChange (value) {
          this.formData.OrgPaper.schoolId = Array.isArray(value) ? value[value.length - 1] : undefined;
        },
        /**
         * 更新新建数据
         */
        refreshFormCreateOrgPaper (reloadData = false) {
          this.formCreateOrgPaper.isInit = true;
        },
        /**
         * 保存
         */
        onAddClick () {
          this.$refs.formCreateOrgPaper.validate((valid) => {
            if (!valid) return;
            let params = {
              orgPaperDto: {
                studentName: this.formData.OrgPaper.studentName,
                commitTime: this.formData.OrgPaper.commitTime,
                schoolId: this.formData.OrgPaper.schoolId,
                studentId: this.formData.OrgPaper.studentId,
                paperId: this.formData.OrgPaper.paperId,
                exerciseId: this.formData.OrgPaper.exerciseId,
                deviceType:this.formData.OrgPaper.deviceType,
                correctFlag:this.formData.OrgPaper.correctFlag,
                usedSeconds:this.formData.OrgPaper.usedSeconds,
                document:this.formData.OrgPaper.document
              }
            };

            OrgPaperController.add(this,params).then(res => {
              this.$message.success('保存成功');
              this.onCancel(true);
            }).catch(e => {});
          });
        },
        initFormData () {},

      /**
       * 文件上传成功
       */
        onDocumentUploadSuccess (response, file, fileList) {
          if(response.success) {
            file.downloadUri = response.data.downloadUri;
            file.fieldName = response.data.fieldName;
            file.url = URL.createObjectURL(file.raw);
            this.formCreateOrgPaper.document.impl.onFileChange(file,fileList);
            this.formData.OrgPaper.document = this.fileListToJson(this.formCreateOrgPaper.document.impl.fileList)
          } else {
            this.$message.error(response.message);
          }
        },

      /**
       * 移除职称证明文件
       */
        onDocumentRemoveFile (file,fileList) {
          this.formCreateOrgPaper.document.impl.onFileChange(file,fileList);
          this.formData.OrgPaper.document = this.fileListToJson(this.formCreateOrgPaper.document.impl.fileList);
        },
        onUploadError (e, file, fileList) {
          this.$message.error('文件上传失败');
        },
        onUploadLimit (files, fileList) {
          this.$message.error('已经超出最大上传个数限制');
        },

        /**
         * 重置表单数据
         */
        resetFormData () {
          this.formData = {
            OrgPaper: {
              studentName: undefined,
              commitTime: undefined,
              schoolId: undefined,
              isDatasourceInit: false
            }
          }
        },
        formInit () {
          this.refreshFormCreateOrgPaper()
        }
      },

    computed () {},
    mounted () {
        // 初始化页面数据
      this.formInit();
    },
    watch: {}
  }
</script>

<style scoped>

</style>
